<template>
  <div class="main">
    <van-cell-group>
      <van-cell class="comment-item">
        <!-- 头像 -->
        <van-image
        @click="gotoPersonal(comment)"
            slot="icon"
            fit="cover"
            round
            :src="comment.avatar ? getImageUrl(comment.avatar) : logo"
            class="avatar"
            width="36"
            height="36"
        />
        <div slot="title">
          <div class="title-wrap">
            <div class="name">{{ comment.name }}
              <van-tag size="mini" v-if="comment.userId === userId" type="danger" style="margin-left:5px">作者</van-tag>
              <van-tag size="mini" v-if="comment.userId !== userId && comment.isOwn == 0"  style="margin-left:5px">我</van-tag>
            </div>
            <div class="like-wrap">
              <!-- 点赞 -->
              <van-icon
                  class="like-icon"
                  :class="{ like: comment.likeId }"
                  :name="comment.likeId ? 'good-job' : 'good-job-o'"
                  @click="like(comment)"
              />
              <!-- 数值 -->
              <span class="like-count">{{ comment.likeId || 0 }}</span>
            </div>
          </div>
          <div class="content">{{ comment.textContent }}</div>
          <div style="display: flex;justify-content: space-between;">
             <div style="display: flex">
              <span class="pubdate">{{
                  comment.convertTime
                }}</span>
                  <span class="pubdate">
                {{ comment.ipProvince ? comment.ipProvince : '未知' }}
              </span>
              <van-button round size="mini" class="reply-btn" @click="$emit('reply-click', comment)"
              >{{ comment.reply_count }} 回复
              </van-button
              >
            </div>
            <span v-if="comment.isOwn == 0"   class="del" @click="$emit('del-comment',comment)">删除</span>
          </div>
        </div>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell class="comment-item-child" v-for="(commentItem,index) in comment.children" :key="index">
        <!-- 头像 -->
        <!--        <template #title>-->
        <van-image
            slot="icon"
            fit="cover"
            round
            :src=" commentItem.avatar ? getImageUrl(commentItem.avatar) : logo"
            class="avatar"
            width="36"
        />
        <div slot="title">
          <div class="title-wrap">
            <div class="name">{{ commentItem.name }}
              <van-tag size="mini" v-if="commentItem.userId === userId" type="danger" style="margin-left:5px">作者
              </van-tag>
               <van-tag size="mini" v-if="commentItem.userId !== userId && commentItem.isOwn == 0"  style="margin-left:5px">我</van-tag>
            </div>
            <div class="like-wrap">
              <!-- 点赞 -->
              <van-icon
                  class="like-icon"
                  :class="{ like: commentItem.isLike == 1?true:false }"
                  :name="commentItem.likeId ? 'good-job' : 'good-job-o'"
                  @click="like(commentItem)"
              />
              <!-- 数值 -->
              <span class="like-count">{{ commentItem.likeId || 0 }}</span>
            </div>
          </div>
          <div class="content">{{ commentItem.textContent }}</div>
          <div style="display: flex;justify-content: space-between;">
            <div style="display: flex">
               <span class="pubdate">{{  commentItem.convertTime }}</span>
                <span class="pubdate"> {{ commentItem.ipProvince }}</span>
                <van-button round size="mini" class="reply-btn" @click="$emit('reply-click', commentItem)" >
                  {{ commentItem.reply_count }} 回复
                </van-button>
            </div>
            <span v-if="commentItem.isOwn == 0"  class="del" @click="$emit('del-comment',commentItem)">删除</span>
          </div>
        </div>
        <!--        </template>-->
        <!--        <template #default>-->

        <!--        </template>-->
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
// 加载封装的axios的接口方法
// import { addlikingAPI, deletelikingAPI } from '@/api'

import {updateLikes} from "../../../api/share";
import store from '../../../store'
import {antiShake} from '@/utils/antie.js'//防抖函数
export default {
  // 组件名
  name: 'commentItem',
  // 定义props
  props: {
    comment: {
      type: Object,
      required: true
    },
    userId: {
      type: String,
      default: null
    },
  },
  // 定义变量
  data() {
    return {
      store: store,
      logo: require("@/assets/tx.png"),
    }
  },
  // 生命周期函数
  created() {
    console.log('comment-item', this.comment)
  },
  // 定义方法函数
  methods: {
    getImageUrl(img) {
      return `${store.state.imgUrl}` + img
    },
    // 点赞评论
     
    like: antiShake( async function (item) {
      console.log('打印comment', item)
      // 点赞的评论id
      const likingId = item.id
      await this.getLike(likingId)
      // if (res.code == 0) {
      //   this.$toast.success('点赞成功')
      // }
      if (item.isLike == 1) {
        item.isLike = 0
        item.likeId -= 1
      } else {
        item.isLike = 1
        item.likeId += 1
      }
      // 点赞弹窗
      item.isLike == 1 ?
          this.$toast.success('点赞成功！')
          : this.$toast.fail('取消点赞！')
    }),
    getLike(likingId) {
      let data = {
        id: likingId,
        type: 1 //文章，动态，视频是0 评论是1
      }
      updateLikes(data).then((res) => {
        if (res.code == 0) {
          // this.$toast.success('点赞成功')
        }
      })
    },
    handleDel(){
      
      this.$emit('del-comment',this.comment)
    },
     // 跳转到主页
    gotoPersonal(item) {
      if (item.isOwn == 0) {//跳转到自己的个人主页
        this.$router.push({path: '/personalPage',query:{}})
      }else{//跳转到别人主页的个人主页
        this.$router.push({path: '/visitPersonal',query:{obj:JSON.stringify(item)}})
      }
    }
  },
  // 定义计算属性
  computed: {},
  // 定义侦听
  watch: {}
}
</script>
<style lang="less" scoped>
.main {
  .comment-item {
    // 头像
    .avatar {
      // width: 36px;
      // height: 36px;
      margin-right: 13px;
    }

    .title-wrap {
      display: flex;
      justify-content: space-between;
      // 用户名
      .name {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 17.38px;
        color: rgba(102, 102, 102, 1);
      }

      .like-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        // 点赞
        .like-icon {
          font-size: 15px;
        }

        // 点赞变色
        .like {
          color: orange;
        }

        // 数值
        .like-count {
          font-size: 13px;
          font-weight: 400;
          margin-left: 2px;
        }
      }
    }

    // 消息内容
    .content {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      // white-space:
      overflow: hidden;
      text-overflow: ellipsis;
      width: 75%;
      word-wrap: break-word; /* 允许换行 */
    }

    // 时间
    .pubdate {
      margin-right: 8px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }

    // 回复按钮
    .reply-btn {
      font-size: 12px;
      font-weight: 400;
      width: 50px;
      height: 24px;
      background-color: #f4f5f6;
      color: #222;
    }
  }

  .comment-item-child {
    padding-left: 49px;
    // 头像
    .avatar {
      width: 36px;
      height: 36px;
      margin-right: 13px;
    }

    .title-wrap {
      display: flex;
      justify-content: space-between;
      // 用户名
      .name {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 17.38px;
        color: rgba(102, 102, 102, 1);
      }

      .like-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        // 点赞
        .like-icon {
          font-size: 15px;
        }

        // 点赞变色
        .like{
          color: orange;
        }

        // 数值
        .like-count {
          font-size: 13px;
          font-weight: 400;
          margin-left: 2px;
        }
      }
    }

    // 消息内容
    .content {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      overflow: hidden;
      text-overflow: ellipsis;
      width: 80%;
      word-wrap: break-word; /* 允许换行 */

    }

    // 时间
    .pubdate {
      margin-right: 8px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }

    // 回复按钮
    .reply-btn {
      font-size: 12px;
      font-weight: 400;
      width: 50px;
      height: 24px;
      background-color: #f4f5f6;
      color: #222;
    }
  }
  .del{
    font-size: 12px;
  }

}
</style>
